<template>
<view>
	<view class="group-box">
		<view class="hot-title">
			<view class="left">
				<view class="title-text">变盘预警</view>
				<image src="@/static/home/subpage/query.png"></image>
			</view>
		</view>
		<view class="bodys">
			<view class="sup-fix">
				<text>红枣</text>
				<text>13956</text>
				<view class="bfb">
					<view class="jd">
						<text></text><text></text><text></text>
					</view>
					<text>99.6%</text>
				</view>
			</view>
			<view class="sub-fix">
				<text>主力净减多头1402手</text>
				<text>-0.43%</text>
				<text>变盘风险值</text>
			</view>
		</view>
	</view>
	<view class="group-box">
		<view class="hot-title">
			<view class="left">
				<view class="title-text">主力趋势机会(20个)</view>
				<image src="@/static/home/subpage/query.png"></image>
			</view>
			<view class="check">
				<image src="@/static/home/subpage/check.png"></image>
				<text>只看自选</text>
			</view>
		</view>
		<view class="list" v-for="(item,index) in 2" @click="analyse">
			<view class="caption">
				<view class="left">
					<image src="@/static/logo.png"></image>
					<text>中金财富</text>
				</view>
				<view class="right">
					<text>详情</text>
					<image src="@/static/home/subpage/icn_right.png"></image>
				</view>
			</view>
			<view class="msg-info">
				<view class="sup" :class="{'redbg':index==0}">
					<text>中证500</text>
					<text>+0.04%</text>
					<text>单日80.3%流多</text>
				</view>
				<view class="sub">
					<view class="li">单日加多901手，流多9.1亿</view>
					<view class="text">
						<text>近一周胜率: </text><text>57.5%</text>
					</view>
					<view class="text">
						<text>近一年盈利: </text><text>6.03亿元</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="hint">
		<view class="fz">产品中持仓数据均为期货公司持有该品种所有合约数据汇总。</view>
		<view class="ts">风险提示: 盈亏、胜率数据为对应期货公司持仓的估算数据，该数据与期货公司本身无任何关联，数据仅供参考，不构成投资建议，据此操作风险自担。</view>
	</view>
</view>
</template>

<script>
	export default {
		name:"trace",
		data() {
			return {
				
			};
		},
		methods:{
			analyse(){
				uni.navigateTo({
					url: '/pages/homeSubpage/analyse/analyse'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.group-box{
		margin-top:24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding:24rpx;
		box-sizing: border-box;
		.hot-title{
			padding-bottom:26rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				.title-text{
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
					line-height: 46rpx;
				}
				& image{
					width:46rpx;height:46rpx;
				}
			}
			.check{
				display: flex;
				align-items: center;
				& image{
					width:64rpx;height:64rpx;
				}
				& text{
					font-size: 28rpx;
					color: rgba(0,0,0,0.4);
				}
			}
		}
		.hot-title::after{
			content: '';
			position: absolute;
			left:0;bottom:0;
			width: 60rpx;
			height: 10rpx;
			background: linear-gradient(90deg, #FF3B30 0%, rgba(255,59,48,0) 100%);
		}
		.bodys{
			margin-top:32rpx;
			.sup-fix{
				display: flex;
				align-items: center;
				justify-content: space-between;
				& text:nth-child(1){
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0,0,0,0.8);
				}
				& text:nth-child(2){
					font-size: 28rpx;
					font-weight: bold;
					color: #33C45B;
				}
				.bfb{
					display: flex;
					align-items: center;
					.jd{
						margin-right:16rpx;
						display: flex;
						align-items: center;
						& text{
							width: 34rpx;
							height: 16rpx;
							background: #FF3B30;
							position: relative;
						}
						& text::after{
							content:'';
							width:6rpx;
							height:26rpx;
							background-color: #fff;
							position: absolute;
							right:0;top:-5rpx;
							transform: rotate(20deg);
							z-index: 1;
						}
						& text:last-child::after{
							width:10rpx;
							right:-4rpx;
						}
					}
					& text:nth-child(2){
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0,0,0,0.8);
					}
				}
			}
			.sub-fix{
				margin-top:8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				& text:nth-child(1){
					font-size: 28rpx;
					color: rgba(0,0,0,0.8);
				}
				& text:nth-child(2){
					font-size: 20rpx;
					color: #33C45B;
				}
				& text:nth-child(3){
					font-size: 20rpx;
					color: rgba(0,0,0,0.4);
				}
			}
		}
		.list{
			padding-top:48rpx;
			.caption{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					& image{
						width:48rpx;height:48rpx;
						margin-right:16rpx;
					}
					& text{
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0,0,0,0.8);
						line-height: 48rpx;
					}
				}
				.right{
					display: flex;
					align-items: center;
					& image{
						width:48rpx;height:48rpx;
						margin-right:16rpx;
					}
					& text{
						font-size: 24rpx;
						color: rgba(0,0,0,0.4);
						line-height: 48rpx;
					}
				}
			}
			.msg-info{
				margin-top:20rpx;
				background: #F4F5F7;
				border-radius: 16rpx;
				overflow: hidden;
				margin-left:66rpx;
				width: 590rpx;
				.sup{
					height: 72rpx;
					background: #33C45B;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding:0 24rpx;
					font-size: 28rpx;
					color:#fff;
				}
				.sup.redbg{
					background: #EE5953;
				}
				.sub{
					padding:24rpx;
					.li{
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0,0,0,0.8);
					}
					.li+.text{
						margin-top:16rpx;
					}
					.text{
						font-size: 24rpx;
						color: rgba(0,0,0,0.4);
						& text:last-child{
							padding-left:8rpx;
						}
					}
					.text:last-child{
						margin-top:8rpx;
					}
				}
			}
		}
		.list:last-child{
			padding-bottom:8rpx;
		}
	}
	.group-box:first-child{
		margin-top:0;
	}
	.hint{
		margin-top:24rpx;
		font-size: 24rpx;
		color: rgba(0,0,0,0.4);
		line-height: 34rpx;
		.ts{
			margin-top:40rpx;
		}
	}
</style>